<!DOCTYPE html>
<html lang="en">
<head>
	<title>Verlet Shapes</title>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen, projection" />
	<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="../js/verlet-1.0.0.js"></script>
</head>
<body>
	<script type="text/javascript" src="../site/js/common.js"></script>
	<div id="header">
		<h1><a href="../">verlet-js</a> / <em>Shapes</em></h1>
		<div id="bsa">
			<div id="bsap_1285933" class="bsarocks bsap_3df5e2ea1c6a237386fb9d4cdf5b99f0"></div>
			<a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a>
		</div>
		<p>
			<h4>Author</h4>
			<a href="http://subprotocol.com/">Sub Protocol</a>
			
			<h4>Summary</h4>
			
			This is the <i>hello world</i> of Verlet-JS. Simple shapes generated using VerletJS.prototype.tire(origin, radius, segments, spokeStiffness, treadStiffness). Also demonstrating various constraint stiffness coefficients. All objects are draggable.
			<h4>Source Code</h4>
			<a href="https://github.com/subprotocol/verlet-js/blob/master/examples/shapes.html">View on GitHub</a>
		</p>
	</div>
	<canvas id="scratch" style="width: 800px; height: 500px;"></canvas>
	<script type="text/javascript">

	window.onload = function() {
		var canvas = document.getElementById("scratch");

		// canvas dimensions
		var width = parseInt(canvas.style.width);
		var height = parseInt(canvas.style.height);

		// retina
		var dpr = window.devicePixelRatio || 1;
		canvas.width = width*dpr;
		canvas.height = height*dpr;
		canvas.getContext("2d").scale(dpr, dpr);

		// simulation
		var sim = new VerletJS(width, height, canvas);
		sim.friction = 1;
		
		// entities
		var segment = sim.lineSegments([new Vec2(20,10), new Vec2(40,10), new Vec2(60,10), new Vec2(80,10), new Vec2(100,10)], 0.02);
		var pin = segment.pin(0);
		var pin = segment.pin(4);
		
		var tire1 = sim.tire(new Vec2(200,50), 50, 30, 0.3, 0.9);
		var tire2 = sim.tire(new Vec2(400,50), 70, 7, 0.1, 0.2);
		var tire3 = sim.tire(new Vec2(600,50), 70, 3, 1, 1);

		// animation loop
		var loop = function() {
			sim.frame(16);
			sim.draw();
			requestAnimFrame(loop);
		};

		loop();
	};
	
	
	</script>
	<div id="footer">
		Copyright 2013 Sub Protocol and other contributors.
		<br/><a href="http://subprotocol.com/">http://subprotocol.com/</a>
	</div>
</body>
